<template>
  <div >
    <el-row :gutter="5">
      <el-col :span="8" :xs="24">
        <el-table
          :key="tableKey"
          ref="price-alloc"
          :loading="listLoading"
          :data="list"
          border
          show-summary
          fit
          highlight-current-row
          stripe
        >
          <el-table-column align="center" label="时间" prop="period">
            <template v-slot="{row}">
              <span>{{ row.period }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="使用量(m³)" prop="total_volume">
            <template v-slot="{row}">
              <span>{{ row.total_volume }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="水费(元)" prop="total_amount">
            <template v-slot="{row}">
              <span>{{ row.total_amount }}</span>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
      <el-col :span="16">
        <div ref="lineChart" style="width: 100%; height: 400px;"></div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {financeRevenueReport, financeUsageReport} from "@/api/analysis";
import echarts from 'echarts'
import moment from "moment";
import {exportExcel} from "@/utils/excel";
export default {
  name: 'UsageReport',
  props: {
    date: {
      type: String,
      required: true
    },
    code: {
      type: String,
    },
  },
  data() {
    return {
      list: [],
      tableKey: 0,
      listLoading: false,
      chart:null
    };
  },
  watch: {
    list: {
      deep: true,
      handler(val) {
        this.setOptions(val)
      }
    },
    date: 'fetchData',
    code: 'fetchData'
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
      this.fetchData()
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$refs.lineChart);
      this.setOptions()
    },
    setOptions(){
      const periods = this.list.map(item => item.period)
      const totalVolumes = this.list.map(item => item.total_volume);
      const totalAmounts = this.list.map(item => item.total_amount);
      const option = {
        title: {
          text: "用户量统计",
          left: "center",
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["水费", "用水量"],
          top: "10%",
          left: "center",
        },
        xAxis: {
          type: "category",
          data: periods,
        },
        yAxis: [
          {
            type: "value",
            name: "用水量",
            position: "left",
            axisLabel: {
              formatter: "{value}m³",
            },
          },
          {
            type: "value",
            name: "水费",
            position: "right",
            axisLabel: {
              formatter: "{value}元",
            },
          },
        ],
        series: [
          {
            name: "用水量",
            type: "line",
            data: totalVolumes,
            smooth: true,
            lineStyle: {
              color: "#4CAF50", // 设置折线的颜色
            },
          },
          {
            name: "水费",
            type: "line",
            data: totalAmounts,
            smooth: true,
            yAxisIndex: 1,
            lineStyle: {
              color: "#FF5722", // 设置折线的颜色
            },
          },
        ],
      };
      this.chart.setOption(option)
    },
    fetchData() {
      if (this.date) {
        this.listLoading = true
        this.fetchUsageReport(this.date,this.code);
      }
    },
    fetchUsageReport(date, code) {
     const query =  {
       date: date,
       code: code,
       is_contains_sub: true,
       type: date.length === 4 ? 2 : 1
      }
      financeUsageReport(query).then(res => {
         if (res.code === 20000) {
           this.list = res.data.list
         }
         this.listLoading = false
      })
    },
    exportData() {
      const query =  {
        date: this.date,
        code: this.code,
        is_contains_sub: true,
        type: this.date.length === 4? 2 : 1
      }
      financeUsageReport(query).then(res => {
        if (res.code === 20000) {
          this.list = res.data.list
          const headers = ['时间','使用量','水费',]
          const data = res.data.list.map(item => {
            return {
              时间: item.period,
              使用量: item.total_volume,
              水费: item.total_amount
            }
          })
          exportExcel(data, headers, '用水报表')
        }
      })
    }
  }
};
</script>
